<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>帖子页面</title>
    <style>
        body{
            margin: 0px;
            background-color:#f4fdfc;
        }
        a{text-decoration:none}
        .banner {
            z-index:999;
            width:100%;
            height:70px;
            top:0;
            left:0;
            position: fixed;
            overflow: hidden;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
            background-color: white;
            filter:alpha(Opacity=50);
            opacity: 0.95;
        }
        #logo {
            margin-top: 11px;
            margin-left: 42px;
            width: 115px;
            height: 46px;

        }
        .searchDiv{
            position: absolute;
            top: 15px;
            left: 182px;
            height: 35px;
            width: 224px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
        }
        .searchDiv:hover{
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #00e6d0;
            color: #00e6d0;

        }
        #search {
            float: left;
            margin-top: 1.4px;
            width: 185px;
            height: 30px;
            border: 0;
            background-color: transparent;
            font: 13px 微软雅黑;
        }
        #btnLeft{
            margin-left: 30px;
            width: 255px;
            position: absolute;
            right: 12.6%;
            top: 20px;
        }
        #searchicon{
            background: no-repeat;
            background-image: url("img/搜索.png");
            background-size: 25px 25px;
            float: right;
            margin-top: 3.5px;
            width: 28px;
            height: 28px;
        }
        #searchicon:hover{
            background-image: url("img/搜索hover.png");
        }
        #settingIcon{
            background-image: url("img/设置.png");
            background-size: 25px 25px;
            margin-top: 5px;
            float: right;
            width: 25px;
            height: 25px;
        }
        #settingIcon:hover{
            background-image: url("img/设置focus.png");
        }
        #settingList{
            background:no-repeat;
            background-image:url("img/下拉框.png") ;
            background-size: 155px 120px;
            filter:alpha(Opacity=50);
            opacity: 0.95;
            position: fixed;
            top: 40px;
            right: 11.8%;
            overflow: hidden;
            z-index: 99999;
            width: 155px;
            height: 120px;
            display: none;
        }
        #accountSetting, #changePersonalSetting, #logout{
            list-style: none;
            font: 13px 微软雅黑;
        }
        #accountSetting:hover, #changePersonalSetting:hover, #logout:hover{
            font: 13px 微软雅黑;
        }
        #accountSetting{
            margin-top: 10px;
        }
        #changePersonalSetting{
            margin-top: 35px;
        }
        #logout{
            margin-top: 10px;
        }
       
        .image1{
            width: 110px;
            height: 110px;
        }
        /*页脚*/
        footer{
            position: relative;
            bottom: 0;
            width: 100%;
            height: 60px;
            clear: both;
            padding-top: 20px;
            padding-bottom: 0;
        }
        #footer{
            text-align: center;
            background-color: white;
            height: 40px;
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #footText{
            height: 20px;
            margin: 5px auto;
        }
        /*主要部分样式*/
        .main{
            margin:0 auto;
            width:986px;
            height:auto;
        }
        .banner-img{
            margin-top:90px;
        }
        .topBtns{
            margin-top:30px;
            margin-left:20px;

        }
        #btnReturn,#btnPrevious,#btnNext,#btnLast{
            border-radius: 3px;
            background-color:white ;
            color:#00e6d0;
            border: 1px solid #00e6d0;
            text-align: center;
            font: normal 15px 微软雅黑 ;
            padding:6px 10px;
        }
        #btnSkip{
            border-radius: 3px;
            background-color:#63decd;
            color:white;
            border: none;
            padding:7px 25px;
            font:normal 15px 微软雅黑 ;
        }
        #btnSkip:hover{
            border-radius: 3px;
            background-color:#00e6d0;
            color:white;
            border: none;
            padding:7px 25px;
            font:normal 15px 微软雅黑 ;
        }
        #pageNum{
            width:30px;
        }

        .mainBlock{
            margin-top:10px;
            border:none;
        }
        .posts{
        	min-height: 300px;
            width:100%;
            height:auto;
            overflow:hidden;
            padding-top:10px;
            background-color: white;
            border-radius: 3px;
            box-shadow:0 0 4px #999999;
        }
        .top{
            margin-top:10px;
            margin-left:20px;
            padding-bottom: 5px;
        }
        #date{
            font:normal 15px 微软雅黑;
            float:right;
            padding-right:20px;
        }
        .user{
            float:left;
            padding-left:20px;
            padding-right:20px;
            text-align: center;
        }
        #userImage{
            margin-top: 8px;
            border: 2px solid aliceblue;
            border-radius:50%;
        }
        #userName{
            text-align: center;
            font: normal 15px 微软雅黑 ;
        }
        .postsMain{
            flaot:right;
        }
        .postsContent{
            width:80%;
            float:right;
            word-wrap: break-word;
            word-break: normal;
        }
        #passageText{
            width:95%;
            font: normal 15px 微软雅黑 ;
        }
        input,button,select,textarea{outline:none;}
        .btnReply{
            float:right;
            margin-right:40px;
            margin-top: -3px;
            margin-bottom:5px;
            background-color:transparent ;
            color:#93e3e0;
            border: none;
            font:normal 15px 微软雅黑 ;
        }
        .btnReply:hover{
            color:#333333;
        }
        .inputBox{
            float: right;
            margin-top: 32px;
            margin-right: -70px;
            width: 340px;
            height: 70px;
            resize: none;
        }

        .inputSubmit{
            float: right;
            border-radius: 3px;
            margin-right: -350px;
            background-color: transparent;
            color: #93e3e0;
            border: none;
            font: normal 15px 微软雅黑;
            padding-top: 90px;
        }
        .inputSubmit:hover{
            color:#333333;
        }
        .commentAndReply{
            width:98%;
            float:right;
            margin-right:20px;
            height: auto;
            background-color: #F6F6F6;
        }
        .comment{
            display: block;
            width:100%;
            height:auto;
        }
        .commentUserImage{
            border: 2px solid aliceblue;
            border-radius:50%;
        }
        .textLine{
            display: inline;
            margin-left: 5px;
            margin-top: 13px;
            font: normal 15px 微软雅黑;
        }
        .dateAndReply{
            margin-top: 40px;
            padding-right: 18px
        }
        .commentDate{
            font: normal 13px 微软雅黑 ;
            float:right;
        }
        .textReply{
            font: bold 15px 微软雅黑;
            margin-top: 13px;
            margin-left: 3px;

        }
        .btnReplyComment{
            float:right;
            margin-top: -3px;
            margin-bottom:5px;
            background-color:transparent ;
            color:#93e3e0;
            border: none;
            font:normal 15px 微软雅黑 ;
        }
        .btnReplyComment:hover{
            color:#333333;
        }
        .commentBox{
        	margin-left: 30px;
            width: 900px;
            height: 70px;
            resize: none;
        }
        #commentText{
            width: 1000px;
            height: 200px;
            resize: none;
        }
        .commentSubmit{
            float:right;
            border-radius: 3px;
            margin-bottom:5px;
            background-color:transparent ;
            color:#93e3e0;
            border: none;
            font:normal 15px 微软雅黑 ;
        }
        .commentSubmit:hover{
            color:#333333;
        }
        .reply{
            display: block;
            width:100%;
            height:auto;
        }
        .commentUserName{
            margin-left: 5px;
            margin-top: 23px;
        }
        #pager{
            margin-top:10px;
            margin-left:0;
        }
        .commentArea{
            margin-top:10px;
            margin-left:0;
            width:100%;
            height:auto;
        }
        .commentInput{
            margin-top:10px;
            margin-left:0;
            width:100%;
            height:auto;
        }
        #btnSubmit{
            margin-top:20px;
            margin-left:0;
            border-radius: 3px;
            background-color:#63decd ;
            color:white;
            border: none;
            padding:7px 25px;
            font:normal 15px 微软雅黑 ;
        }
        #btnSubmit:hover{
            border-radius: 3px;
            background-color: #00e6d0;
            color:white;
            border: none;
            padding:7px 25px;
            font:normal 15px 微软雅黑 ;
        }

    </style>

    <link rel="stylesheet" type="text/css" href="css/common.css"
	media="screen" />

    <script type="text/javascript"  src="js/inner_post.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.goup.min.js"></script>
    <script type="text/javascript" src="js/inner_post.js"></script>
	<script type="text/javascript" src="third-party/template.min.js"></script>
	<script type="text/javascript" charset="utf-8"
	src="js/umeditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/umeditor.min.js"></script>
	<script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
	   <link href="themes/default/css/umeditor.css" type="text/css"
	rel="stylesheet">
    <script type="text/javascript">
        //        页头下拉表部分的函数 务必加入！
        $(document).ready(function(){
            $("#settingList").mouseleave(function(){
                $("#settingList").hide();
            });
        });
        function showList(){
            $("#settingList").show();
        }
    </script>

</head>
<body onload="init()">

<!--页头部分-->
<div class="banner">
    <img src="img/logologin.png" id="logo"/>
    <div class="searchDiv">
        <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
        <a onclick="searchByKey()" id="searchicon"></a>
    </div>
    <div id="btnLeft">
        <a  onmouseover="showList()"><div id="settingIcon"></div></a>
        <a href="per_page.html">
            <input type="button" name="homepage" id="hpBtn" value="个人中心">
        </a>
        <a href="home_page.html"><input type="button" name="homepage" id="ppBtn" value="首页"></a>
    </div>
</div>
<!--这里是设置的下拉表-->
<div id="settingList">
    <ul style="padding-left: 10px">
        <li id="changePersonalSetting">
            <a href="edit_self.html" >编辑个人资料</a>
        </li>
        <li id="accountSetting">
            <a href="change_pwd.html">更改密码</a>
        </li>
        <li id="logout">
            <a onclick="zhuxiao()">退出</a>
        </li>
    </ul>
</div>
<div class="main">
    <div class="banner-img">
        <img src="img/banner2.jpg" width="986">
    </div>
    <div id="topBtns">

    </div>
    <div class="mainBlock">
        <!-- 每一个帖子的部分 -->
        <div class="posts">
            <!--标题和日期-->
            <div class="top">
                <b id="postsTitle"></b>

                <b id="date"></b>
            </div>
            <hr style=" width:96%;">


            <!--帖子主体部分-->
            <div class="postsMain">
                <!-- 发帖人头像和用户名信息 -->
                <div class="user">
                  <!-- <a href="<%="giggleOthersHomepage.jsp?username=" + user.getUsername()%>"> -->  
                        <img id="userImage" src=""  alt="" width="80" height="80" >
                        <br>
                        <b id="userName"></b>
                  <!-- </a> -->  
                </div>

                <!-- 此处为帖子正文的文字和图片部分 -->
                <div class="postsContent">
                    <div id="passageText">
                        
                    </div>
				<!-- 添加了一个/div --></div>
				  <!--<input type="button"  class="btnReply" id="<%="replyBtn"+floor.getFloorID()%>" value="禁言中"> -->
<!-- 从这里删除-->
				
            </div><!--postMain结束-->
           

        </div>
				<!--帖子正文与回复评论区之间的分割线-->
                <hr style="width:92%; margin-right:40px;">

                  <!--回复部分-->
                <div id="replyPart" class="commentAndReply"></div>
    </div>

				<!--帖子正文与回复评论区之间的分割线-->
                <hr style="width:100%; margin-right:40px;">
                		        		<!--此处使用文本编辑插件lalala -->
    <div class="commentArea">
        <div class="commentInput">
		<textarea id="commentText"></textarea>
		
        </div>

       <input type="button" class="btns" name="submit" id="btnSubmit" value="发表" onclick="publishComment()">  
    </div>
    <div id="pager">

    </div>





</div>

    <!--页脚部分-->
    <footer>
        <div id="footer">
            <div id="footText">
                <img src="img/giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px"   >
                <em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
                <a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
                <em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2018 Zealers 版权所有</em>
            </div>
        </div>
    </footer>
    <!--页脚部分结束-->
</body>
</html>

